<template>
  <div class="container">
    <Search @handle="handle" :searchCondition="searchObj"></Search>
    <mytable ref="mytable" :config="tableconfig">
      <div slot="mytablebody"></div>
      <!-- 操作 -->
      <template v-slot:operation="{ data }">
        <el-button type="text" @click="detail(data)" size="small">查看</el-button>
        <el-button type="text" @click="edit(data)" size="small">编辑</el-button>
        <el-button type="text" @click="del(data)" size="small">删除</el-button>
      </template>
      <!-- 操作 -->
    </mytable>

    <AddSystem ref="AddSystem" @save="save"></AddSystem>

    <drawer
      ref="drawer"
      :data="selectItem"
      title="系统详情"
      :columns="columns"
    ></drawer>

    <DialogMessage
      :message="message"
      :isShowDialog="isShowDialog"
      @confirm="confirm"
    ></DialogMessage>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import mytable from "@/components/table/index.vue";
import drawer from "@/components/drawer.vue";
import AddSystem from "./components/AddSystem.vue";
import DialogMessage from "@/components/DialogMessage.vue";
import { columns, tableconfig } from "./data/configData.js";
import {
  addSystem,
  getSystemData,
  delSystem,
} from "@/api/configuration/systemApi";
import { changeParam } from "@/utils/helper";
export default {
  components: {
    Search,
    mytable,
    drawer,
    AddSystem,
    DialogMessage,
  },
  data() {
    return {
      isShowDialog: false,
      message:
        "如果删除一个系统，对应的环境、服务、系统监控job、服务器监控job、中间件监控job、系统监控job日志、服务器监控job日志、中间件监控job日志都要删除。是否确定删除？",
      columns,
      tableconfig,
      selectItem: "",
      searchObj: {
        name: "",
        isMain:false,
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    handle(func, name) {
      console.log(func, name,'func, namefunc, name');
      this[func](name);
    },
    search(name) {
      this.searchObj.name = name;
      this.searchObj.pageNo = 1;
      this.tableconfig.currentpage = 1;
      this.getSystemList();
    },
    reset(name){
      this.searchObj.name = name;
      this.searchObj.pageNo = 1;
      this.tableconfig.currentpage = 1;
      this.getSystemList();
    },
    async save(data) {
      const res = await addSystem(data);
      if (res && res.success) {
        this.$refs.AddSystem.resetForm("ruleForm");
        this.$message.success({
          message: res.message,
          duration: 500,
        });
        this.searchObj.isMain = true;
        await this.getSystemList();
      }
      this.$refs.AddSystem.close();
    },
    detail(data) {
      this.selectItem = data;
      this.$refs.drawer.open(data);
    },
    add() {
      this.$refs.AddSystem.open();
    },
    edit(data) {
      this.$refs.AddSystem.open(data);
    },
    del(data) {
      this.isShowDialog = true;
      this.selectItem = data;
    },
    async confirm(type) {
      if (type == 1) {
        const res = await delSystem({ ...this.selectItem });
        if (res && res.success) {
          this.$message.success(res.message);
          
          if (this.tableconfig.tabledata.length == 1) {
            this.tableconfig.currentpage--;
            this.searchObj.pageNo = this.tableconfig.currentpage;
            // this.tableconfig.currentpage = 1;
          }
          this.searchObj.isMain = true;
          await this.getSystemList();
        }
      }
      this.isShowDialog = false;
    },
    async getSystemList() {
      const res = await getSystemData(changeParam({ ...this.searchObj }));
      if (res && res.success) {
        const {
          result: { list, total },
        } = res;
        this.tableconfig.tabledata = list || [];
        this.tableconfig.total = total;
        this.searchObj.isMain = false;
      }
      // console.log(res);
    },
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.getSystemList();
    },
    handleCurrentChange(value) {
      console.log(2);
      this.tableconfig.currentpage = value;
      this.searchObj.pageNo = value;
      this.getSystemList();
    },
  },
  created() {
    this.getSystemList();
  },
};
</script>
<style lang="scss" scoped>
.container {
}
</style>
